import React, { useState } from 'react';
import { AlertResult } from '@/utils/contacts';
import { Input, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@/utils/antdIcons';
import style from './index.less';
import TRNotification from '@/utils/notification';

const MobileAlertComp = (props) => {
  const [visible, setVisible] = useState(true);
  const [inputValue, setInputValue] = useState('');

  const _onClose = (index) => {
    props.fn(index, inputValue);
    setVisible(false);
  };
  return (
    <Modal
      centered
      closable={false}
      visible={visible}
      onCancel={() => _onClose(AlertResult.CANCEL)}
      onOk={() => _onClose(AlertResult.SUCCESS)}
      width={408}
      maskClosable={false}
      okText="提交"
      cancelText="取消"
      okButtonProps={{ disabled: !inputValue.length }}
      className={style.mobileAlert}
      title={
        <div className={style.title}>
          <div className={style.icon}>
            <ExclamationCircleOutlined
              style={{ color: '#faad14', marginRight: 16, fontSize: 22 }}
            />
          </div>
          请输入您的登录密码
        </div>
      }
    >
      <Input.Password
        onChange={(e) => {
          setInputValue(e.target.value);
        }}
      />
    </Modal>
  );
};

class MobileAlert {
  __key__ = '';
  show = () => {
    return new Promise((resolve) => {
      if (this.__key__ !== '') {
        return;
      }
      const that = this;
      this.__key__ = String(Date.now());
      let fn = (index, inputValue) => {
        that.__key__ = '';
        resolve({ index, inputValue });
      };
      TRNotification.add({
        key: this.__key__,
        content: <MobileAlertComp fn={fn} />,
        duration: null,
      });
    });
  };
  dismiss = () => {
    if (this.__key__.length > 0) {
      TRNotification.remove(this.__key__);
      this.__key__ = '';
    }
  };
}

const _mobileAlert = new MobileAlert();
export default _mobileAlert;
